<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员注册</title>
    <style>
        #test-image-file {
            width: 300px;
        }

        #div3 {
        display: inline-block;
        text-align: right;
        width: 80px;
      }

    </style>

</head>


<body>
    <h3 style="color:blue">欢迎注册会员</h3>
    <form method="get" action="data.html" enctype="multipart/form-data">
        手机号码：
        <input type="text" name="username" placeholder="11位手机号" title="提示信息">
        <span style="color:red">必填</span>
        <br>
        创建密码：
        <input type="password" name="pwd" maxlength="8" placeholder="8位密码">
        <span style="color:red">必填</span>
        <br>
        注册邮箱：
        <input type="text" name="email" placeholder="例如:wustzz@sina.com">
        <span style="color:red">必填</span>
        <br>
        <div id="div3">验证码：</div>
        <input
        type="text"
        name="verification code"
        title="验证码"
        id="verification code"
      />
      <span id="capcha">5位验证码</span>
      <script>
        //验证码：由大小写字母或数字组成
        let codeStr =
          "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        //验证码长度
        let length = 5;
        let capcha = document.getElementById("capcha");
        let change_capcha = document.getElementById("change_capcha");
        // 用来生成一个[n,m]随机整数
        function getRandom(n, m) {
          return parseInt(Math.random() * (m - n + 1) + n);
        }
        // 将随机生成的整数下标对应的字母放入span中
        function getCode() {
          let str = "";
          // 验证码有几位就循环几次
          for (let i = 0; i < length; i++) {
            let index = getRandom(0, 61);
            str += codeStr.charAt(index);
          }
          capcha.innerHTML = str;
        }
        // 页面初始加载时就调用函数生成验证码，页面刷新也会执行
        getCode();
        // 点击刷新验证码
        capcha.addEventListener("click", getCode);
        change_capcha.addEventListener("click", getCode);
      </script>

        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别：
        <label>
            <input type="radio" name="sex" value="male" checked="checked"> 男
        </label>
        <label>
            <input type="radio" name="sex" value="female"> 女
        </label>
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生日：
        <input type="date" name="mydate">
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年龄：
        <input type="text" name="old">
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;籍贯：
        <select name="sheng">
            <option value="0">河北省</option>
            <option value="1">山西省</option>
            <option value="2">吉林省</option>
            <option value="3">辽宁省</option>
            <option value="4">黑龙江省</option>
            <option value="5">陕西省</option>
            <option value="6">甘肃省</option>
            <option value="7">青海省</option>
            <option value="8">山东省</option>
            <option value="9">福建省</option>
            <option value="10">浙江省</option>
            <option value="11">台湾省</option>
            <option value="12">河南省</option>
            <option value="13" selected="selected">湖北省</option>
            <option value="14">湖南省</option>
            <option value="15">江西省</option>
            <option value="16">江苏省</option>
            <option value="17">安徽省</option>
            <option value="18">广东省</option>
            <option value="19">海南省</option>
            <option value="20">四川省</option>
            <option value="21">贵州省</option>
            <option value="22">云南省</option>
        </select>
        <select name="major">
            <option value="0">武汉市</option>
            <option value="1">随州市</option>
            <option value="1">荆州市</option>
        </select>
        <br>
        个人学历：
        <select name="major">
            <option value="0">小学</option>
            <option value="1" selected="selected">初中</option>
            <option value="2">高中</option>
            <option value="3">本科</option>
            <option value="4">研究生</option>
        </select>
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月薪：
        <input type="range" id="score" name="score" min="0.0" max="10000.0" step="0.5" value="60.0">
        <span id="msg"></span>
        <br>
        个人爱好：
        <label>
            <input type="checkbox" name="like" value="sing">唱歌
        </label>
        <label>
            <input type="checkbox" name="like" value="run">跑步
        </label>
        <label>
            <input type="checkbox" name="like" value="swim">游泳
        </label>
        <br>
        个人照片:
        <p></p>
        <div id="test-image-preview" style="border: 1px solid silver; width: 100%; height: 200px; background-repeat: no-repeat; 
background-position: center;">
        </div>
        <p></p>
        <p>
            <input type="file" id="test-image-file" name="test">
        </p>
        <p id="test-file-info">没有选择文件</p>
        <br>
        个人简介：
        <textarea name="intro" cols="50" rows="10">请填写个人简历</textarea>
        <br>
        <input type="submit" value="提交">
        <input type="reset" value="重填">

    </form>
</body>




<script>
    var msg = document.getElementById("msg"); // 根据id值找到span元素
    window.onload = function () {
        msg.innerHTML = document.getElementById("score").value; // 获取区间域初始value值 
    }
    document.getElementById("score").onchange = function () {
        msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
    }
</script>

<script>
    var fileInput = document.getElementById('test-image-file');
    var info = document.getElementById('test-file-info');
    var preview = document.getElementById('test-image-preview');
    fileInput.addEventListener('change', function () { // 监听change事件
        preview.style.backgroundImage = ''; // 清除背景图片
        if (!fileInput.value) {
            info.innerHTML = '没有选择文件';
            return;
        }
        var file = fileInput.files[0]; // 获取File引用
        // 获取File信息:
        info.innerHTML = '文件: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' + file.lastModifiedDate;
        if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
            alert('不是有效的图片文件!');
            return;
        }
        var reader = new FileReader(); // 读取文件
        reader.onload = function (e) { // 发起一个异步操作来读取文件内容
            var data = e.target.result; // data串形如： '...(base64编码)...' 
            preview.style.backgroundImage = 'url(' + data + ')';
        };
        reader.readAsDataURL(file); // 以DataURL的形式读取文件
    });
</script>

</html>